<template>
	<div class="">
		<!--<base-header pName="newBrace"></base-header>-->
		<div class="brace-bg"></div>
		<div class="brace-top">

		</div>
		<div @click="jumpDoctorList" class="new-brace set-doctor mb30">
			<span class="new-barce-name">我的矫正医生</span>
			<span class="new-barce-set">{{doctor_name?doctor_name:'请选择'}}</span>
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace">
			<span class="new-barce-name">正在佩戴 {{barce_msg.name}}</span>
		</div>
		<div class="new-brace f14">
			<span class="new-barce-name">牙套总步数</span>
			<span class="mr40">共</span>
			<input v-model="steps_count" @keyup="isNum" class="new-barce-input" maxlength="3" max="999" type="number" name="" id="" value="" />
			<span class="">步</span>
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace">
			<span class="new-barce-name">每步佩戴天数</span>
			<input v-model="steps_days" @keyup="isNum" class="new-barce-input" type="number" name="" id="" value="" />
			<span class="">天</span>
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace">
			<span class="new-barce-name">开始矫正时间</span>
			<input v-model="start_date" class="new-barce-input" type="text" name="" id="scroller_start" value="" />
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace mb30">
			<span class="new-barce-name">预计结束时间</span>
			<input class="new-barce-input" type="text" name="" id="" :value="end_date" disabled="disabled" />
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace f14">
			<span class="new-barce-name">提醒</span>
		</div>
		<div class="new-brace">
			<span class="new-barce-name">跟换新牙套（最后一天会收到提醒）</span>
			<input v-model="replace_remind" class="new-barce-input" type="text" name="" id="replace_remind" value="" />
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace">
			<span class="new-barce-name">早餐后提醒戴牙套</span>
			<input v-model="breakfast_remind" class="new-barce-input" type="text" name="" id="breakfast_remind" value="" />
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace">
			<span class="new-barce-name">午餐后提醒戴牙套</span>
			<input v-model="lunch_remind" class="new-barce-input" type="text" name="" id="lunch_remind" value="" />
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div class="new-brace mb30">
			<span class="new-barce-name">晚餐后提醒戴牙套</span>
			<input v-model="dinner_remind" class="new-barce-input" type="text" name="" id="dinner_remind" value="" />
			<span class="new-barce-ang"><i class="fa fa-2x fa-angle-right"></i></span>
		</div>
		<div @click="putPlan" class="new-brace finish-brace">
			<span class="new-barce-put">完成</span>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import Loading from "@/components/common/Loading"
	import mobiscroll from "../../../static/Mobiscroll/js/mobiscroll.custom-3.0.0-beta6.min.js"
	export default {
		name: 'NewBrace',
		components: {
			BaseHeader,
			Loading
		},
		data() {
			return {
				uid: '',
				token: '',
				url: '',
				oss_url: '',
				bid: '',
				docotr_id: '',
				doctor_name: '',
				barce_msg: '',
				steps_count: '',
				steps_days: '',
				start_date: '',
				replace_remind: '20:00',
				breakfast_remind: '',
				lunch_remind: '',
				dinner_remind: '',
				isloading: true
			}
		},
		computed: {
			end_date: function() {
				var timestamp = Date.parse(new Date(this.start_date)) / 1000 + this.steps_count * this.steps_days * 24 * 60 * 60;
				var newDate = new Date();
				newDate.setTime(timestamp * 1000);
				if(this.start_date) {
					return newDate.toLocaleDateString();
				} else {
					return;
				}
			}
		},
		mounted() {
			this.doctor_id = localStorage.getItem('did');
			this.doctor_name = localStorage.getItem('dname');
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.bid = this.$route.params.bid;
			this.getBraceMsg();
			var self = this;
			$('#scroller_start').mobiscroll().date({
				theme: 'mobiscroll',
				lang: 'zh',
				display: 'bottom',
				onClose: function(textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
					self.start_date = textVale.valueText;
				}
			});
			$('#replace_remind').mobiscroll().time({
				theme: 'mobiscroll',
				lang: 'zh',
				display: 'bottom',
				onClose: function(textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
					self.replace_remind = textVale.valueText;
				}
			});
			$('#breakfast_remind').mobiscroll().time({
				theme: 'mobiscroll',
				lang: 'zh',
				display: 'bottom',
				onClose: function(textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
					self.breakfast_remind = textVale.valueText;
				}
			});
			$('#lunch_remind').mobiscroll().time({
				theme: 'mobiscroll',
				lang: 'zh',
				display: 'bottom',
				onClose: function(textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
					self.lunch_remind = textVale.valueText;
				}
			});
			$('#dinner_remind').mobiscroll().time({
				theme: 'mobiscroll',
				lang: 'zh',
				display: 'bottom',
				onClose: function(textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
					self.dinner_remind = textVale.valueText;
				}
			});
		},
		methods: {
			//获取牙套信息
			getBraceMsg() {
				var self = this;
				var data = {
					id: self.bid
				};
				$.post(global.domain + global.API.braces_info, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.barce_msg = msg.data;
						self.steps_count = msg.data.steps_count;
						self.steps_days = msg.data.steps_days;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//下一步
			putPlan() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					braces_id: self.bid,
					doctor_id: self.doctor_id,
					steps_count: self.steps_count,
					steps_days: self.steps_days,
					start_date: self.start_date,
					end_date: self.end_date,
					replace_remind: self.replace_remind,
					breakfast_remind: self.breakfast_remind,
					lunch_remind: self.lunch_remind,
					dinner_remind: self.dinner_remind,
				};
				$.post(global.domain + global.API.braces_plan_save, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.$router.push({
							path: '/brace_home',
							query: {
								pName: 'article'
							}
						});
					} else {
						self.$layer.alert(msg.error_msg);
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			},
			//
			jumpDoctorList() {
				var self = this;
				this.$router.push({
					path: '/doctor_list',
					query: {
						bid: self.bid,
						type: 'new'
					}
				});
			},
			//验证是否为数字
			isNum() {
				if(/[^\d]/.test(this.steps_count)) { //替换非数字字符    
					var temp_amount = this.steps_count.replace(/[^\d]/g, '');
					this.steps_count = temp_amount;
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
</style>